<template>
  <div class="details">
    <Card>
      <Row type="flex"
           justify="end">
        <Button @click="close">返回</Button>
      </Row>
      <Divider>会员详情</Divider>
      <Row class="more">
        <Col :span="6"><b>姓名：</b> <span>{{member.realname}}</span> </Col>
        <Col :span="6"><b>手机号：</b> {{member.phone}}</Col>
        <Col :span="6"><b>性别：</b> {{member.sex ? '男':'女'}}</Col>
        <Col :span="6"><b>出生日期：</b> {{member.birthday}}</Col>
        <Col :span="6"><b>身高：</b> <span>{{member.bodyHeight}}CM</span></Col>
        <Col :span="6"><b>体重：</b> <span>{{member.weight}}KG</span></Col>
        <Col :span="6"><b>职业：</b> <span>{{member.occupation}}</span></Col>
        <Col :span="6"><b>工作地点：</b> <span>{{member.workAddress}}</span></Col>
        <Col :span="6"><b>住址：</b> <span>{{member.homeAddress}}</span></Col>
      </Row>
      <Row class="more">
        <Col :span="6"><b>会员卡名：</b> <span style="margin-right: 5px;">{{member.cards}} </span></Col>
        <Col :span="6"><b>发卡馆：</b> <span>{{member.storeId}}</span></Col>
        <Col :span="6"><b>发卡员：</b> <span>{{member.sendCardUser}}</span></Col>
        <Col :span="6"><b>发卡时间：</b> <span>{{member.sendTime}}</span></Col>
        <Col :span="6"><b>过期时间：</b> <span>{{member.endTime}}</span></Col>
        <Col :span="6"><b>备注：</b> <span>{{member.remarks}}</span></Col>
      </Row>
    </Card>
  </div>
</template>

<script>
import { getByPhone } from '@/api/user'
import config from '@/config'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'query',
  data () {
    return {
      imgUrl: config.baseUrl.imgurl,
      phone: this.$route.query.phone,
      member: {}
    }
  },
  filters: {
  },
  watch: {
    '$route' (to, from) {
      this.phone = to.query.phone
    }
  },
  created () {
    this.getByPhone()
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    close () {
      this.$router.back(-1)
    },
    getByPhone () {
      getByPhone(this.phone).then(res => {
        this.member = res.data
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less">
.details {
  .more {
    margin-bottom: 20px;
  }
  .coinId {
    display: flex;
    align-items: center;
    &-img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
}
</style>
